<template xmlns="http://www.w3.org/1999/html">
  <font-net-frame ref="frameRef" :params="form_data" :query="code.list">
    <!-- form-header -->
    <template #title>
      <sea-table-title slot="title" title="逆向工程" subtitle="用于生成代码"></sea-table-title>
    </template>

    <!-- form-input -->
    <template #input>
      <el-form-item label="数据库" prop="schemaName" for="schemaName">
        <el-input v-model="form_data.schemaName" id="schemaName" placeholder="英数据库"></el-input>
      </el-form-item>
      <el-form-item label="表名" prop="tableName" for="tableName">
        <el-input v-model="form_data.tableName" id="tableName" placeholder="中/英表名"></el-input>
      </el-form-item>
    </template>

    <!-- buttons -->
    <template #buttons>
      <el-button title="载入数据库配置" @click="reloadMapping">
        <i class="fa fa-fw fa-database"></i>载入数据库
      </el-button>
    </template>

    <!-- data-panel -->
    <template #default="{list}">
      <el-table :data="list">
        <el-table-column property="schemaName" label="数据库名" width="180"></el-table-column>
        <sea-col-link property="tableName" label="表名EN" width="280" :click="onAction"></sea-col-link>
        <sea-col-link property="tableComment" label="表名CHN" :click="onAction"></sea-col-link>
      </el-table>

      <sea-dialog ref="dialogRef">
        <operation ref="panelRef"></operation>
      </sea-dialog>
    </template>
  </font-net-frame>
</template>

<script setup>
import Operation from "./operation.vue";
import code from "./code";
import {reactive, ref} from "vue";

const frameRef = ref();
const dialogRef = ref();
const panelRef = ref();

const form_data = reactive({
    schemaName: 'med',
    tableName: ''
});

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
const onAction = (evt, row, arg) => {
    if (evt === '$tableName' || evt === '$tableComment') {
        let dialog = {title: `${row.tableComment} ${row.tableName}`, fullscreen: true};
        dialogRef.value.open(dialog).then(() => {
            panelRef.value.setRowData(row);
        });
    }
}

/**
 * 重新载入数据库配置
 */
const reloadMapping = () => {
    code.rebuild().then(() => {
        frameRef.value.reload();
    });
}
</script>
